<template>
  <div class="container">
      <Header></Header>
    <div>
      <div
        class="cover"
        :style="{
          width: '100%',
          height: '10.15rem',
          'background-image': 'url(' + getImgUrl(info.thumb) + ')',
        }"
      ></div>
      <div class="box">
         
        <div class="name">
          <h4>{{info.title}}</h4>
          <span>{{info.add_time | formatDate}}</span>
        </div>
      </div>
    </div>

    <div v-html="htmlHanlde(info.content)" class="content" style="padding: 1rem"></div>
  </div>
</template>

<script>
import { getArticleInfo } from "@/service/index.js";
import Header from "@/components/header/Header.vue";
export default {
  components: {
    Header,
  },
  data() {
    return {
      id: this.$route.query.id,
      info: {},
    };
  },
  created() {
    getArticleInfo({ id: this.id })
      .then((response) => {
        console.log(response);
        if (response.code == 200) {
          this.info = response.data.info;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },

  methods: {},
};
</script>

<style lang="less">
.container {
  .content /deep/ p {
    margin: 0.3rem 0px;
  }
}
.cover {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.box {
    margin: -2.35rem 0.35rem 0px;
    padding: 0.95rem 0.5rem;
    background: rgb(255, 255, 255);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border-bottom: 1px solid rgb(167, 166, 166);
}
.name{
    margin-left: 0.5rem;
    font-size: .85rem;
    h4{
        margin-top:0 ;
    }
}
</style>
